<template>
  <div class="historyFile">
    <el-table 
      v-if="fileList.length" 
      :data="fileList" 
      v-loading="listLoading"
      size="small" 
      :show-header="false" 
      style="width: 100%"
    >
      <el-table-column align="left" prop="name" min-width="200">
        <template slot-scope="{ row }">
          <div @click="previewFile(row)">
            <image-type :width="20" :fileType="row.fileType">{{row.filename }}</image-type>
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="80">
        <template slot-scope="{row}">
          <span><i class="el-icon-user"></i> {{ row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" prop="size" min-width="80">
        <template slot-scope="{ row }">{{ parseTime(row.create_time) }}</template>
      </el-table-column>
      <el-table-column min-width="50">
        <template slot-scope="scope">
          <div style="font-size: 15px">
            <el-tooltip content="点评" placement="top" effect="light">
              <i class="el-icon-edit" v-if="id != scope.row.owner" @click="showCommentDialog(scope.row)"></i>
            </el-tooltip>
            <el-tooltip content="删除" placement="top" effect="light">
              <i class="el-icon-delete" v-if="id == scope.row.owner" @click="handDelFile(scope.$index, scope.row)"></i>
            </el-tooltip>
            <el-tooltip content="点评记录" placement="top" effect="light">
              <i class="el-icon-document" @click="showRecordDialog(scope.row)"></i>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > pageSize"
      :total="total"
      :layout="'total, prev, pager, next'"
      :page.sync="currentPage"
      :limit.sync="pageSize"
      @pagination="handlePage"
    />
    <el-dialog title="痕迹资料点评" :visible.sync="dialogFormVisible">
      <div v-if="selectedRow.filename" class="desc" style="margin-bottom: 10px; color: #409eff;">
        {{ selectedRow.filename }}
      </div>
      <el-form :model="comment">
        <el-form-item label="点评内容:" style="margin: 20px 0">
          <el-input type="textarea" :rows="3" v-model="comment.content" autocomplete="off" style="width: 86%;">
          </el-input>
        </el-form-item>
        <el-form-item label="点评分数:">
            <el-input-number controls-position="right" :min="0" :max="100" v-model="comment.score" style="width: 86%;"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handFileComment">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="历史记录" :visible.sync="dialogRecordVisible">
      <FileCommentsTable :fileComments="selectedRow.file_comment" @fetchHistoryFile="fetchHistoryFile" :handleCancelVisible="handleCancelVisible"/>
    </el-dialog>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    getHistoryUpFile,
    delHasFile,
    postFileComment,
    getFileComments
  } from '@/api/work.js'
  import {
    getFileType,
    parseTime,
    previewFile
  } from '@/utils/index.js'
  export default {
    name: 'HistoryFile',
    props: {
      taskId: {
        type: Number
      }
    },
    components: {
      ImageType: () => import('@/components/ImageType'),
      FileCommentsTable: () => import('./historyCommentTable'),
      Pagination: () => import('@/components/Pagination')
    },
    data() {
      return {
        fileList: [],
        dialogFormVisible: false,
        dialogRecordVisible: false,
        listLoading: false,
        selectedRow: {},
        comment: {},
        currentPage: 1,
        total: 0,
        pageSize: 10
      }
    },
    computed: {
      ...mapGetters([
        'id'
      ])
    },
    mounted() {
      this.fetchHistoryFile()
    },
    methods: {
      parseTime,
      previewFile,
      // 点击分页
      handlePage({ page }) {
        this.currentPage = page
        this.fetchHistoryFile()
      },
      // 打开点评对话框
      showCommentDialog(row) {
        this.dialogFormVisible = true
        this.selectedRow = row
      },
      // 打开点评记录对话框
      showRecordDialog(row) {
        this.dialogRecordVisible = true
        this.selectedRow = row
      },
      // 发送点评数据
      handFileComment() {
        let {
          content,
          score
        } = this.comment
        if (!content || !score) {
          this.$message.warning('请填写点评内容和分数！')
          return
        }
        const param = {
          id: this.id,
          file: this.selectedRow.id
        }
        postFileComment({
          ...param,
          ...this.comment
        }).then(res => {
          if (res && res.data && res.data.id) {
            this.$message.success('点评成功')
            this.dialogFormVisible = false
            this.fetchHistoryFile()
          }
        })
      },
      // 删除文件 
      handDelFile(index, row) {
        this.$confirm('即将删除已上传文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delHasFile(row.id).then(res => {
            if (res) {
              this.fileList.splice(index, 1)
              this.$emit('setHistoryFileNum', this.fileList.length)
            }
          })
        })
      },
      // 处理数据
      formatData(data) {
        data.forEach(
          item => {
            item.fileType = getFileType(item.url, '.')
          }
        )
        return data
      },
      // 请求历史上传文件
      fetchHistoryFile() {
        this.listLoading = true
        const param = {
          is_report: true,
          task: this.taskId,
          page: this.currentPage
        }
        getHistoryUpFile(param).then(
          res => {
            if(res) {
              const { count, results } = res.data || {}
              this.fileList = results
              this.total = count
              this.formatData(this.fileList)
              this.$emit('setHistoryFileNum', this.fileList.length)
            }
            this.listLoading = false
          }
        )
      },
      handleCancelVisible(){
        this.dialogRecordVisible = false
      }
    },
  }

</script>
<style lang="scss">
  .historyFile {
    .el-dialog__body {
      padding: 10px 20px !important;
    }

    .el-tooltip:hover {
      cursor: pointer;
    }
  }

</style>
